<template>
	<view class="bg">
		<view class="search-nav">
			<view><uni-search-bar placeholder="搜索内容" radius="8" bgColor="#FFFFFF" @confirm="onSearch" @clear="onCancel" cancelButton="none" @input="onInput" /></view>
			<view class="p10-0">
				<text class="searchBtn" @click="onSearchBtn">搜索</text>
			</view>
		</view>
		<view class="content">
			<view v-for="item in dataInfo" :key="item.id">
				<view class="course" @click="onLink('/pages/course/info/info',item.id)">
					<view class="text-right">
						<image class="image" :src="item.cover" mode="widthFix"></image>
						<!-- <uni-tag class="course-label" text="专栏" type="error" size="mini" /> -->
					</view>
					<view class="course-brief">
						<view class="title pl8 line-clamp2">{{item.title}}</view>
						<uni-section :title="item.price" titleColor="red" titleFontSize="18px">
							<template v-slot:right>
								<text class="fz08rem number">{{item.orders_count}}人在学</text>
							</template>
						</uni-section>
					</view>
				</view>
				<view class="divider" ></view>
			</view>
		</view>
		<uni-load-more :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{page:1,limit:10},
				loadData:true,
				status:'more',
				dataInfo:[],
				
			}
		},
		onShow() {
			this.onGetData()
		},
		methods: {
			onGetData(){
				let _this = this
				this.$request_api('applet_api/course','POST',this.form).then(res => {
					_this.form.page++
					if(_this.dataInfo.length >= res.total){
						_this.loadData = false
						_this.status = 'no-more'
					}
					_this.dataInfo.push(...res.data) 
				}).catch(err => {
					console.log(err)
				})
			},
			onSearch(e){
				this.form.search = e.value
				this.form.page = 1
				this.dataInfo = []
				this.onGetData()
			},
			onInput(e){
				this.form.search = e
			},
			onSearchBtn(){
				this.form.page = 1
				this.dataInfo = []
				this.onGetData()
			},
			onCancel(e){
				this.loadData = true
				this.form.search = ''
				this.form.page = 1
				this.dataInfo = []
				this.onGetData()
			},
			onReachBottom() {
				this.onGetData()
			},
			onLink(url,id){
				uni.navigateTo({
					url: url+"?id="+id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
// .bg{background-color: #F5F5F5;}
.column{display: grid;text-align: center;}
.column-image{width: 40px;height: 40px;}
.content{padding: 15px;background-color: #FFFFFF;}
.course{display: grid;grid-template-columns: 30% 70%;margin-top: 12px;}
.course-brief{background-color: #FFFFFF;height: 100px;}
.title{height: 85rpx;line-height:45rpx;font-size: 1.1rem;font-weight: 600;margin-top: 5px;}
.price{margin-top: 12px;}
.image{width: 100%;border-radius: 5px;height: auto;}
.course-label{position: relative;top: -3vh;}
.number{color: #7c7c7c;}
</style>
